<script>
import { mapStores } from "pinia";
import { useBaseStore } from "../stores/useBaseStore.js";
import { login } from "../api/index.js";


export default {
    methods: {
        homePage() {
            this.$router.push({
                name: "home"
            })
        },
        async dologin() {
            let data = await login(this.params);
            console.log("请求成功后，服务器提供有效数据:", data);
            this.baseStore.setLoginData(data.token, data.user)
            this.homePage();
        }
    },
    computed: {
        ...mapStores(useBaseStore)
    },
    data() {
        return {
            params: {
                username: "",
                password: "",
                usertype: 1
            }
        }
    },
}
</script>

<template>
    <div class="locImg">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>管理员登录</span>
                </div>
            </template>
            <el-form>
                <el-form-item label="账号">
                    <el-input type="text" placeholder="用户名" v-model="params.username">
                        <template #prefix>
                            <EpPlus />
                        </template>

                    </el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" placeholder="密码" v-model="params.password">
                        <template #prefix>
                            <epAim />
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-radio-group class="btn-group" size="large" v-model="params.usertype">
                        <el-radio-button label="管理员" :value="1" />
                        <el-radio-button label="教师" :value="2" />
                        <el-radio-button label="学生" :value="3" />
                    </el-radio-group>
                </el-form-item>

                <el-button class="into" type="primary" @click="dologin()">登录</el-button>
            </el-form>

        </el-card>
    </div>
</template>
<style scoped>
.locImg {
    width: 100%;
    height: 100%;
    background-image: url(../assets/img/login-background.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-card {
    width: 500px;
    transform: translateY(-100px);
}

.btn-group {
    width: 100%;
}

.el-radio-button {
    flex-grow: 1;
}

:deep(.el-radio-button__inner) {
    width: 100%;
}

.into {
    width: 100%;
}
</style>